<template>
  <div class="body-info">
    <div class="body-content">
      <div class="body-search" style="margin-bottom: 30px;">
        <div class="body-search-title">查询条件</div>
        <div class="body-search-input">
          <div class="body-search-one">
            <div class="body-search-text">熔炼号</div>
            <div class="body-search-info">
              <el-input v-model="searchForm.f_rlh" style="width: 100%" clearable placeholder="请输入熔炼号"></el-input>
            </div>
          </div>
          <!-- <div class="w-140"></div> -->
          <div class="body-search-one">
            <div class="body-search-text">开始时间</div>
            <div class="body-search-info">
              <el-date-picker
              value-format="yyyy-MM-dd"
                v-model="searchForm.f_start_time"
                align="right"
                type="date"
                placeholder="请选择"
                style="width: 100%"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
          </div>
          <!-- <div class="w-140"></div> -->
          <div class="body-search-one">
            <div class="body-search-text">结束时间</div>
            <div class="body-search-info">
              <el-date-picker
               value-format="yyyy-MM-dd"
                v-model="searchForm.f_end_time"
                align="right"
                type="date"
                placeholder="请选择"
                style="width: 100%"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="flex-w"></div>
          <div class="body-search-btn">
            <el-button type="primary" class="main-btn" @click="handleSearch" icon="el-icon-search"
              >搜索</el-button
            >
            <el-button
              type="primary"
              style="margin-left: 27px;"
              class="main-btn"
               @click="handleReset"
              icon="el-icon-refresh-right"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <div style="height:2px;width:1835px;margin:0 auto;background:#17357F;"></div>
      <div class="body-search body-search-t" style="padding-right: 10px">
        <div class="body-search-title" style="padding: 20px 0 18px 27px;">已完成</div>
        <div class="body-table" style="padding:0 23px 0 15px;">
          <div style="background: rgba(0, 59, 133, 0.3);border-radius: 6px;height: 340px; padding: 24px 29px 8px 26px; display:flex;flex-direction:column;">
            <div style="height: 48px;width: 100%; background: rgba(0,61,125,0.8); color:rgba(255,255,255,0.5);display:flex;">
              <div class="cursom-tb cursom-order">顺序号</div>
              <div class="cursom-tb">熔炼号</div>
              <div class="cursom-tb">钢牌号</div>
              <div class="cursom-tb">设备名称</div>
              <div class="cursom-tb">开始时间</div>
              <div class="cursom-tb">结束时间</div>
            </div>
            <div style="flex:1;height:0;overflow-y:auto;">
              <div style="height: 48px;width: 100%; display:flex;">
                <div class="cursom-tb cursom-order">1</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">2025-12-25</div>
                <div class="cursom-tb">2025-12-25</div>
              </div>
              <div style="height: 48px;width: 100%; background: rgba(0,61,125,0.2);display:flex;">
                <div class="cursom-tb cursom-order">2</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">2025-12-25</div>
                <div class="cursom-tb">2025-12-25</div>
              </div>
              <div style="height: 48px;width: 100%; display:flex;">
                <div class="cursom-tb cursom-order">3</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">2025-12-25</div>
                <div class="cursom-tb">2025-12-25</div>
              </div>
              <div style="height: 48px;width: 100%; background: rgba(0,61,125,0.2);display:flex;">
                <div class="cursom-tb cursom-order">4</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">2025-12-25</div>
                <div class="cursom-tb">2025-12-25</div>
              </div>
              <div style="height: 48px;width: 100%; display:flex;">
                <div class="cursom-tb cursom-order">5</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">2025-12-25</div>
                <div class="cursom-tb">2025-12-25</div>
              </div>
              <div style="height: 48px;width: 100%; background: rgba(0,61,125,0.2);display:flex;">
                <div class="cursom-tb cursom-order">6</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">032100</div>
                <div class="cursom-tb">2025-12-25</div>
                <div class="cursom-tb">2025-12-25</div>
              </div>
            </div>
            
          </div>
        </div>
        
      </div>
      <div style="height:2px;width:1835px;margin:0 auto;background:#17357F;"></div>
      <div class="body-search" style="padding:20px;">
        <!-- <div class="body-search-title" style="">菜单区</div> -->
        <div class="body-tab">
          <div
            class="body-tab-li"
            @click="handleNavClick(item)"
            v-for="item in navData"
            :key="item.menuName"
            :class="currentNav == item?.menuName ? 'body-tab-active' : ''"
          >
            {{ item?.menuName || '--'}}
            <div class="line-3" v-show="currentNav == item?.menuName"></div>
          </div>
          <div style="width:0;flex:1;"></div>
        </div>
      </div>
      <div class="body-echarts">
        <!-- <div class="echarts-title">
          <div class="echarts-flexw">图像区</div>
          <div class="echarts-btn">拉速曲线</div>
          <div class="echarts-flexw"></div>
        </div> -->
        <stackingAreaEcharts :curveData="curveData"></stackingAreaEcharts>
      </div>
    </div>
  </div>
</template>
<script>
import stackingAreaEcharts from "./stackingAreaEcharts.vue";

import dayjs from "dayjs";

import { queryList, queryGetMenuData } from "@/utils/api";
export default {
  components: {
    stackingAreaEcharts,
  },

  data() {
    return {
      currentNav: "zkd",
      navDatas:[],
      navData: [{
        menuName: "真空度"
      },{
        menuName: "保压时间"
      },{
        menuName: "氩气流量"
      },{
        menuName: "拉速"
      },{
        menuName: "连铸温度"
      },{
        menuName: "大包重量"
      },{
        menuName: "中包重量"
      },{
        menuName: "中包烘烤"
      },{
        menuName: "结晶器液面"
      },{
        menuName: "电磁搅拌"
      },{
        menuName: "化学成分",
      },{
        menuName: "LF化学成分",
      },{
        menuName: "LF数据(钢水温度+氙气流量)",
      }],
      loading:false,
      tableData: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",

      pageInfo: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 10,

      searchForm: {
        f_rlh: "",
        f_start_time: "",
        f_end_time: ""
      },

      curveData: []
    };
  },
  mounted() {
    this.queryListInfo();
  },
  methods: {
    async handleSeeClick(val){
      const res = await queryGetMenuData({shujuId: val.id});

      this.navDatas = res.data;

      this.handleNavClick(this.navDatas[0])
    },
    handleReset(){
      this.searchForm = {
        f_rlh: "",
        f_start_time: "",
        f_end_time: ""
      }
      this.queryListInfo();
    },
    handleSearch(){
      this.pageInfo.pageNum = 1;
      this.queryListInfo();

      
    },
    async queryListInfo() {
      this.loading = true;
      const res = await queryList({ ...this.pageInfo, ...this.searchForm });
      this.tableData = res.rows.map((item) => {
        item.start_time = dayjs(item.start_time).format("YYYY-MM-DD HH:mm:ss");
        item.end_time = dayjs(item.end_time).format("YYYY-MM-DD HH:mm:ss");
        return item;
      });

      this.handleSeeClick(this.tableData[0])
      this.loading = false;
      this.total = res.total;
    },
    handleNavClick(item) {
      this.currentNav = item.menuName || "--";

      this.curveData = item.curveData;
    },
    handleCurrentChange(val){
      this.pageInfo.val = val;
      this.queryListInfo()
    }
  },
};
</script>

<style lang="scss" scoped>
.cursom-tb{
width:0;flex:1;display:flex;align-items:center;
justify-content:center;
}
.cursom-order{
  max-width: 100px !important;
}

.body-info {
  padding: 0 20px 20px 20px;
  //   padding-bottom: 16px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .body-content {
    width: 1880px;
    height: 100%;
    display:flex;
    flex-direction: column;
    // height: 930px;
    // border-radius: 12px;
    background: linear-gradient(0deg, #012A81 0%, #06193E 100%);
border: 2px solid;
border-image: linear-gradient(90deg, #0072FF, #87F5FF, #0072FF) 2 2;
    // padding: 30px 18px 0 18px;
    .body-mb-20 {
      margin-bottom: 20px;
    }
    .body-search-t {
      position: relative;
      height: 420px;
    }
    .body-echarts {
      
      flex:1;
      height:0;
      padding: 0 20px 20px 20px;
      // background: #062053;
      .echarts-title {
        display: flex;
        height: 40px;
        align-items: center;
        padding: 0 12px;
        .echarts-btn {
          font-size: 14px;
          color: #ffffff;
          height: 24px;
          line-height: 22px;
          border: 1px solid #ffffff;
          border-radius: 4px;
          padding: 0 20px;
        }
        .echarts-flexw {
          flex: 1;
          width: 0;
          font-size: 16px;
          font-weight: bold;
          color: #ffffff;
        }
      }
    }
    .body-search {
      .body-search-table {
        height: 100%;
        display: flex;
        flex-direction: column;
        :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){
          border:0;
        }
        :deep(.el-table .el-table__cell){
          padding: 1.5px 0;
        }
        
        :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
          background: rgba(0,61,125,0.2);
        }
        :deep(.el-table th.el-table__cell){
          border:0;
        }
        :deep(.el-table){
          height:0;
          flex:1;
          display: flex;
          flex-direction: column;
        }
        :deep(.el-table__body-wrapper){
          height: 0;
          flex: 1;
          overflow-y: auto;
        }
        
        // :deep(
        //     .el-table--enable-row-transition .el-table__body td.el-table__cell
        //   ) {
        //   background: #062053;
        //   color: #ffffff;
        //   padding: 8.5px 0;
        //   // border-right: 1px solid #3d5179;
        // }
        // :deep(.el-table::before) {
        //   height: 0;
        // }

        // :deep(
        //     .el-table--striped
        //       .el-table__body
        //       tr.el-table__row--striped
        //       td.el-table__cell
        //   ) {
        //   background: #073254;
        // }
      }
      .body-tab {
        height: 53px;
        padding:6px;
        width: 100%;
        background-image: url("../assets/image/cai-bj.png");
        background-size: 100% 100%;
        display: flex;
        .body-tab-li {
          color: #ffffff;
          cursor: pointer;
          font-size: 20px;
          padding: 0 24px;
          height: 100%;
          display: flex;
          font-weight: bold;
          align-items: center;
          justify-content: center;
          // border-right: 1px solid #ffffff;
          position: relative;
          .line-3{
            height:3px;
            width: calc(100% - 48px);
            position: absolute;
            left:0;
            bottom:-3px;
            right:0;
            margin: auto;
            background: #0AFBEE;
          }
          &:hover {
            color: #0AFBEE;
          }
        }
        // .body-tab-li:last-child {
        //   border: 0;
        //   width: 0;
        //   flex: 1;
        // }
        .body-tab-active {
          color: #0AFBEE;
        }
      }

      .body-search-box {
        height: 316px;
        overflow-y: auto;
        position: absolute;
        bottom: 61px;
        width: calc(100% - 42px);
        left: 32px;
        z-index: 2;
        display: flex;
      }
      .page-info {
        width: 100%;
        padding-right: 20px;
        padding-top: 336px;
        display: flex;
        .page-w {
          width: 0;
          flex: 1;
        }
      }
      .body-border-2 {
        border: 2px solid #ffffff;
        border-radius: 2px;
        height: 320px;
        width: calc(100% - 66px);
        position: absolute;
        bottom: 60px;
        left: 30px;
        z-index: 0;
      }
      .w-20 {
        width: 22px;
      }
      // :deep(.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li){
      //   min-width: 40px !important;
      //   height: 40px !important;
      // }
      // :deep(.el-pagination.is-background .el-pager li:not(.disabled).active){
      //   background: #062053;
      //   // width: 40px !important;
      //   // height: 40px !important;
      // }
      
      .body-search-title {
        font-size: 20px;
        color: #ffffff;
        font-weight: bold;
        padding: 23px 0 36px 27px;
      }
      .body-search-input {
        display: flex;
        padding-right: 32px;
        .w-140 {
          width: 140px;
        }
        .flex-w {
          width: 0;
          flex: 1;
        }
        .body-search-btn {
          .main-btn {
            background: linear-gradient(0deg, #012A81 0%, #06193E 100%);
            border: 2px solid #0C41B1;
            border-radius: 0;
            // border-image: linear-gradient(90deg, #0072FF, #87F5FF, #0072FF) 2 2;
            height: 50px;
          }
        }
        .body-search-one {
          width: 540px;
          height: 50px;
          display: flex;
          :deep(.el-input__icon){
            font-weight: bold;
                font-size: 20px;
                color: #2F64A5;
                line-height: 50px;
          }
          .body-search-text {
            width: 118px;
            height: 50px;
            background: #062053;
            font-size: 20px;
            color: #ffffff;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .body-search-info {
            width: 360px;
            height: 100%;
            
            :deep(.el-input__inner) {
              height: 50px;
              background: linear-gradient(0deg, #012A81 0%, #06193E 100%);
              border-radius: 0;
              border: 2px solid #0C41B1;
              font-weight: bold;
                font-size: 20px;
                color: #2F64A5;
              &::placeholder {
                font-weight: bold;
                font-size: 20px;
                color: #2F64A5;
              }
            }
          }
        }
      }
    }
  }
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 6px; /* 垂直滚动条宽度 */
  height: 6px; /* 水平滚动条高度 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #bdccdd;
  border-radius: 6px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #d4d493;
  border-radius: 6px;
}

/* 滚动条滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
  background: #eddc3f;
}
</style>